<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>课程管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="./layui/css/layui.css">
	<script type="text/javascript" src="./layui/layui.js" charset="UTF-8"></script>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
	<div class="layui-inline">
      	<label class="layui-form-label">课程名称</label>
      	<div class="layui-input-block">
       		<input type="text" name="coursename" id="coursename" autocomplete="off" class="layui-input">
      	</div>
    </div>
    <div class="layui-inline">
      	<label class="layui-form-label">课程信息</label>
      	<div class="layui-input-block">
       		<input type="text" name="courseinfo" id="courseinfo" autocomplete="off" class="layui-input">
      	</div>
    </div>
    <div class="layui-inline">
      	<button class="layui-btn" data-type="reload" id="addBtn">添加课程</button>
    </div>
  	<table class="layui-hide" id="test" lay-filter="test"></table>    
	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="addStudent">添加学生</a>
		<a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="addCheck">发起签到</a>
		<a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="allCheck">查看历次签到</a>
	</script>
	<script>
		layui.use(['table','layer'], function(){
		  	var $ = layui.jquery
		  	,table = layui.table
		  	,layer = layui.layer;
		  	//动态表格，获取数据库数据
		  	var tableIns = table.render({
				elem: '#test'
				,id: 'test'
				,url: 'GetCourse.do'
				,toolbar:  '#toolbarDemo'
				,defaultToolbar: ['filter', 'exports', 'print']
				,title: '课程列表'
				,page:true
				,limit:4
				,limits:[5,10,15,20,25]
				,cols: [[
					{type:'numbers',width:80}
			  		,{field:'courseid', title:'课程ID'}
			  		,{field:'coursename', title:'课程名'}
			  		,{field:'courseinfo', title:'课程信息' ,width:400}
			        ,{fixed: 'right', width: 150, align:'center', toolbar: '#barDemo'}
					]],
				parseData:function(res) {
					var result;
	                if (this.page.curr)
	                	result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
	                else
	                    result = res.data.slice(0, this.limit);
	               	return {
	               		"code": res.code, //解析接口状态
	               		"msg": res.msg, //解析提示文本
	               		"count": res.count, //解析数据长度
	               		"data": result //解析数据列表
	               		};
	               	}
			});
		  	
		  	//添加课程，数据表格重加载
			$('#addBtn').on('click',function(){
				//首先添加数据
				$.ajax({
					url:'AddCourse.do'
					,data:{
						coursename:$('#coursename').val(),
						courseinfo:$('#courseinfo').val(),
					}
				})
				//之后刷新
		  		var demoReload = $("#demoReload").val();
		  		tableIns.reload({
		  			method:'POST'
		  			,url: 'GetCourse.do'
		  			,where: {
		  				'coursename':demoReload
		  			}
		  			,done: function(res,curr,count) {
		  				this.where={};
		  			}
		  		})
		  	});
			
			//删除&&查看&&编辑
			table.on('tool(test)', function(obj){
				var data = obj.data;
				if(obj.event === 'addCheck'){
					layer.confirm('开启签到？', function(index){
						obj.del();
						$.ajax({
							url:'AddCheck.do'
							,data:{
								courseid:data.courseid
							}
						});
						layer.msg("发布成功");
						layer.close(index);
					});
				} else if(obj.event === 'addStudent') {
					layer.open({
		            	type: 2 
		            	,title: '添加学生'
		            	,area: ['800px', '600px']
		            	,content:['addStudent.jsp']
		            	,data:{
		            	courseid:data.courseid}
		            	,maxmin: true
		            	,btn: ['关闭']
		        		,yes: function(){
		    				layer.closeAll();
		        		}
		        		,end:function(){
		        			location.reload();
		        		}
		          	}); 
				} else if(obj.event === 'allCheck') {
					layer.open({
		            	type: 2 
		            	,title: '课程学生列表'
		            	,area: ['800px', '600px']
		            	,content:['allCheck.do']
		            	,maxmin: true
		            	,btn: ['关闭']
		        		,yes: function(){
		    				layer.closeAll();
		        		}
		        		,end:function(){
		        			location.reload();
		        		}
		          	}); 
				}
			});
	})
	</script>
</body>
</html>